<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>详情页</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/proList.css"/>
	</head>
	<body>
		<!------------------------------head------------------------------>
		<div th:replace="head.html"></div>
		<!-----------------address------------------------------->
		<div class="address">
			<div class="wrapper clearfix">
				<a href="index.html">首页</a>
				<span>/</span>
				<a href="flowerDer.html" th:text="${furnClassificationtype1.typename}"></a>
				<th:class th:if="${furnClassificationtype!=null}">
				<span>/</span>
				<a href="proList.html" th:text="${furnClassificationtype.typename}"></a>
				</th:class>
				<span>/</span>
				<a href="#" class="on" th:text="'【最家】'+${furnCommodity.productname}"></a>
			</div>
		</div>
		<!-----------------------Detail------------------------------>
		<div class="detCon">
			<div class="proDet wrapper">
				<div class="proCon clearfix">
					<div class="proImg fl">
						<img class="det" id="zhutu" th:src="${furnCommodity.images1}" />
						<div class="smallImg clearfix">
							<img th:src="${furnCommodity.images1}" th:data-src="${furnCommodity.images1}">
							<img th:if="${furnCommodity.images2!=''&&furnCommodity.images2!=null}" th:src="${furnCommodity.images2}" th:data-src="${furnCommodity.images2}">
							<img th:if="${furnCommodity.images3!=''&&furnCommodity.images3!=null}" th:src="${furnCommodity.images3}" th:data-src="${furnCommodity.images3}">
							<img th:if="${furnCommodity.images4!=''&&furnCommodity.images4!=null}" th:src="${furnCommodity.images4}" th:data-src="${furnCommodity.images4}">
						</div>
					</div>
					<div class="fr intro">
						<div class="title">
							<h4 th:text="'【最家】'+${furnCommodity.productname}" style="height: 50px;line-height: 25px"></h4>
							<p th:text="${furnCommodity.headline}"></p>
							<span class="sprice" th:text="'￥'+${furnCommodity.commodityprices}"></span>
						</div>
						<div class="proIntro">
							<p class="fenlei">颜色分类</p>
							<div class="smallImg clearfix categ">
								<th:p th:each="var : ${furnVarietys}">
									<p class="fl" th:if="${var.varityname!=''}">
										<img width="45" height="45" th:class="'color'+${var.id}" th:if="${var.varityname!=''}" th:src="${var.varityname}" th:alt="${var.colorname}" th:data-src="${var.varityname}">
									</p>
								</th:p>
							</div>
							<p>数量&nbsp;&nbsp;库存<span th:text="${furnCommodity.quantity}"></span>件</p>
							<div class="num clearfix">
								<img class="fl sub" src="img/temp/sub.jpg">
								<span class="fl">1</span>
								<img class="fl add" src="img/temp/add.jpg">
								<p class="please fl">请选择商品属性!</p>
							</div>
						</div>
						<div class="btns clearfix">
							<a th:if="${session.names} eq null" href="login.html"><p class="buy fl">立即购买</p></a>
							<a th:if="${session.names} ne null"><p id="c" class="buy fl">立即购买</p></a>
							<a th:if="${session.names} eq null" href="login.html"  class="gouwu"><p class="cart fr">加入购物车</p></a>
							<a th:if="${session.names} ne null" href="#2"  class="gouwu"><p class="cart fr">加入购物车</p></a>
						</div>
						<a class="commid" style="display: none" th:text="${furnCommodity.id}"></a>
						<script>
							function qqq(){

							}
                            //详细页码点击颜色分类价格发生改变
                            $(".proIntro .smallImg img").on("click",function () {
                                var index = $(".proIntro .smallImg img").index(this);
                                $(".proIntro .smallImg .fl:not(.f1:eq("+index+"))").prop("class","fl")
                                $.ajax({
                                    url: "http://localhost:8080/quick3.html",
                                    data:{"img":$(this).prop("src")},
                                    success:function (adouble) {
                                        $(".sprice").text("￥"+adouble);
                                    }
                                })
                            })

                           /* $(".proIntro .smallImg img").mouseover(function () {

                            })*/


							//颜色分类id
                            var cid;
							$(".proIntro .smallImg img").on("click",function () {
								cid = $(this).prop("class").replace("color","");
                            })
							$(".gouwu").click(function () {

                                //数量
                                var amount = $(".num .fl:eq(1)").text();
                                //商品id
                                var commid = $(".commid").text();
                                //价格
                                var price = $(".sprice").text().replace("￥","");
                                if(cid!=null&&cid!=""&&cid!=undefined) {
                                    var unames1 = $(".unames1").text();
                                    if(unames1==null||unames1==undefined||unames1==''){
                                        location.href="login.html";
                                    }
                                    $.ajax({
                                        url: "http://localhost:8080/cartadd",
                                        data: {"amount": amount, "cid": cid, "commid": commid, "price": price},
                                        success: function (data) {
												if (data==false){
													window.location.href="login.html";
												}
                                        }
                                    })
                                }
                            })



							/**********************无规格不结算************************************/
							$(".btns a").click(function(){
								if($(".categ p").hasClass("on")){
									if($(this).children().hasClass("buy")){
										// $(this).attr("href","order.html");
										//数量
										var amount = $(".num .fl:eq(1)").text();
										//商品id
										var commid = $(".commid").text();
										//价格
										var sprice = $(".sprice").text().replace("￥","");
										// amount='+amount+'&commid='+commid+'&price='++'&cid='+cid;
										location.href='jons.html?amount='+amount+'&commid='+commid+'&price='+sprice+'&cid='+cid;
									}
									$(".proIntro").css("border","none");
									$(".num .please").hide();
								}else{
									$(".proIntro").css("border","1px solid #c10000");
									$(".num .please").show();
								}
							})



							$(".num .fl:eq(2)").on("click",function () {
                                if(parseInt($(".num .fl:eq(1)").text())+1>99){
                                    return false;
                                }
                                $(".num .fl:eq(1)").text(parseInt($(".num .fl:eq(1)").text())+1);
                            })
                            $(".num .fl:eq(0)").on("click",function () {

                                if(parseInt($(".num .fl:eq(1)").text())-1<1){
                                    return false;
                                }
                                $(".num .fl:eq(1)").text(parseInt($(".num .fl:eq(1)").text())-1);
                            })
						</script>
					</div>
				</div>
			</div>
		</div>
		<div class="introMsg wrapper clearfix">
			<div class="msgL fl">
				<div class="msgTit clearfix">
					<a class="on">商品详情</a>
					<a>所有评价</a>
				</div>
				<div class="msgAll">
					<div class="msgImgs">
						<img width="940" th:if="${furnCommodity.particularsimg1!=''}" th:src="${furnCommodity.particularsimg1}">
						<img width="940" th:if="${furnCommodity.particularsimg1==''&&furnClassificationtype!=null}" th:src="@{'img/'+${furnClassificationtype.typename}+'1.jpg'}">
						<img width="940" th:if="${furnCommodity.particularsimg1==''&&furnClassificationtype==null}" th:src="@{'img/'+${furnClassificationtype1.typename}+'1.jpg'}">

						<img width="940" th:if="${furnCommodity.particularsimg2!=''}" th:src="${furnCommodity.particularsimg2}">
						<img width="940" th:if="${furnCommodity.particularsimg2==''&&furnClassificationtype!=null}" th:src="@{'img/'+${furnClassificationtype.typename}+'2.jpg'}">
						<img width="940" th:if="${furnCommodity.particularsimg2==''&&furnClassificationtype==null}" th:src="@{'img/'+${furnClassificationtype1.typename}+'2.jpg'}">

						<img width="940" th:if="${furnCommodity.particularsimg3!=''}" th:src="${furnCommodity.particularsimg3}">
						<img width="940" th:if="${furnCommodity.particularsimg3==''&&furnClassificationtype!=null}" th:src="@{'img/'+${furnClassificationtype.typename}+'3.jpg'}">
						<img width="940" th:if="${furnCommodity.particularsimg3==''&&furnClassificationtype==null}" th:src="@{'img/'+${furnClassificationtype1.typename}+'3.jpg'}">
					</div>
					<div class="eva">
						<div class="per clearfix">
							<img class="fl" src="img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="img/temp/eva01.jpg"></p>
									<p><img src="img/temp/eva02.jpg"></p>
									<p><img src="img/temp/eva03.jpg"></p>
									<p><img src="img/temp/eva04.jpg"></p>
									<p><img src="img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="img/temp/eva01.jpg"></p>
									<p><img src="img/temp/eva02.jpg"></p>
									<p><img src="img/temp/eva03.jpg"></p>
									<p><img src="img/temp/eva04.jpg"></p>
									<p><img src="img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="img/temp/eva01.jpg"></p>
									<p><img src="img/temp/eva02.jpg"></p>
									<p><img src="img/temp/eva03.jpg"></p>
									<p><img src="img/temp/eva04.jpg"></p>
									<p><img src="img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="img/temp/eva01.jpg"></p>
									<p><img src="img/temp/eva02.jpg"></p>
									<p><img src="img/temp/eva03.jpg"></p>
									<p><img src="img/temp/eva04.jpg"></p>
									<p><img src="img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="img/temp/eva01.jpg"></p>
									<p><img src="img/temp/eva02.jpg"></p>
									<p><img src="img/temp/eva03.jpg"></p>
									<p><img src="img/temp/eva04.jpg"></p>
									<p><img src="img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="msgR fr">
				<h4>为你推荐</h4>
				<div class="seeList">
					<th:tuijian th:each="furn5 : ${furnCommodities8}">
					<a th:href="'proDetail.html?id='+${furn5.id}">
						<dl>
							<dt><img width="161" height="243" th:src="${furn5.imagestheme}"></dt>
							<dd class="zuijia" th:text="'【最家】'+${furn5.productname}"></dd>
							<dd th:text="'￥'+${furn5.commodityprices}"></dd>
						</dl>
					</a>
					</th:tuijian>
				</div>
				
			</div>
		</div>
		<div class="like">
			<h4>猜你喜欢</h4>
			<div class="bottom">
				<div class="hd">
					<span class="prev"><img src="img/temp/prev.png"></span>
					<span class="next" style="margin-right: 200px"><img src="img/temp/next.png"></span>
				</div>
				<div class="imgCon bd">
					<div class="likeList clearfix">
						<div th:if="${furnCommodities05!=null&&furnCommodities05!=''}">
							<th:a1 th:each="furn05 : ${furnCommodities05}">
								<a th:href="'proDetail.html?id='+${furn05.id}">
									<dl>
										<dt><img width="216" height="216" th:src="${furn05.imagestheme}"></dt>
										<dd class="zuijia2" th:text="'【最家】'+${furn05.productname}"></dd>
										<dd th:text="'￥'+${furn05.commodityprices}"></dd>
									</dl>
								</a>
							</th:a1>
						</div>
						<div th:if="${furnCommodities510!=null&&furnCommodities510!=''}">
							<th:a2 th:each="furn510 : ${furnCommodities510}">
								<a th:href="'proDetail.html?id='+${furn510.id}">
									<dl>
										<dt><img width="216" height="216" th:src="${furn510.imagestheme}"></dt>
										<dd class="zuijia2" th:text="'【最家】'+${furn510.productname}"></dd>
										<dd th:text="'￥'+${furn510.commodityprices}"></dd>
									</dl>
								</a>
							</th:a2>
						</div>
						<div th:if="${furnCommodities105!=null&&furnCommodities105!=''}">
							<th:a3 th:each="furn105 : ${furnCommodities105}">
								<a th:href="'proDetail.html?id='+${furn105.id}">
									<dl>
										<dt><img width="216" height="216" th:src="${furn105.imagestheme}"></dt>
										<dd class="zuijia2" th:text="'【最家】'+${furn105.productname}"></dd>
										<dd th:text="'￥'+${furn105.commodityprices}"></dd>
									</dl>
								</a>
							</th:a3>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--返回顶部-->
		<div th:replace="gotop.html"></div>
		<div class="msk"></div>
		<!--footer-->
		<div class="footer">
			<div class="top">
				<div class="wrapper">
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot1.png"/></a>
						<span class="fl">7天无理由退货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot2.png"/></a>
						<span class="fl">15天免费换货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot3.png"/></a>
						<span class="fl">满599包邮</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot4.png"/></a>
						<span class="fl">手机特色服务</span>
					</div>
				</div>
			</div>
			<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
			违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			jQuery(".bottom").slide({titCell:".hd ul",mainCell:".bd .likeList",autoPage:true,autoPlay:false,effect:"leftLoop",autoPlay:true,vis:1});
		</script>
		<script>
            //限制字符个数
            $(".zuijia").each(function () {
                var maxwidth = 12;
                if ($(this).text().length > maxwidth) {
                    $(this).text($(this).text().substring(0, maxwidth));
                    $(this).html($(this).html() + '…');
                }
            });
            //限制字符个数
            $(".zuijia2").each(function () {
                var maxwidth = 16;
                if ($(this).text().length > maxwidth) {
                    $(this).text($(this).text().substring(0, maxwidth));
                    $(this).html($(this).html() + '…');
                }
            });
		</script>
	</body>
</html>
